<template>
    <div class="view">
        <nav-bar title="分类">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="category-wrap">
            <cube-scroll-nav
                    :side="true"
                    :data="categoryList"
                    :current="current"
                    @change="changeHandler"
                    @sticky-change="stickyChangeHandler">
                <cube-scroll-nav-panel
                        v-for="category in categoryList"
                        :key="category.name"
                        :label="category.name"
                        :title="category.name">
                    <ul>
                        <li v-for="child in category.child">
                            <div class="category-child" @click="toProductList(child.id)">
                                <img :src="child.image+'?imageView2/0/w/100'">
                                <p>{{child.name}}</p>
                            </div>
                        </li>
                    </ul>
                </cube-scroll-nav-panel>
            </cube-scroll-nav>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import CommonUnit from "@/unit/CommonUnit";
    import NavBar from "@/components/aui/NavBar.vue";

    @Component({
        components: {
            NavBar
        }
    })
    export default class ProductCategory extends Scene {
        private categoryList: any[] = [];
        private current: string = "";
        private filePath: string = require("@/assets/images/user-no-face.jpg");

        private back(): void {
            this.navigateBack();
        }

        private get id(): string {
            return String(this.$route.query.id || "");
        }

        private mounted() {
            Http.get(this.api.category).then((res) => {
                if (res.code === 1) {

                    let categoryList: any[] = [];
                    let categoryData: any[] = res.data;
                    this.current = categoryData[0].name;
                    for (let i in categoryData) {
                        const categoryMain: any = {};
                        categoryMain.name = categoryData[i].name;
                        categoryMain.type = categoryData[i].category_id;
                        if (this.id === String(categoryData[i].category_id)) {
                            this.current = categoryData[i].name;
                        }
                        categoryMain.child = [{name: categoryData[i].name, id: categoryData[i].category_id, image: categoryData[i].image.file_path}];
                        for (let j in categoryData[i].child) {
                            const categoryChild: any = {};
                            categoryChild.name = categoryData[i].child[j].name;
                            categoryChild.image = categoryData[i].child[j].image?categoryData[i].child[j].image.file_path:this.filePath;
                            categoryChild.id = categoryData[i].child[j].category_id;
                            categoryMain.child.push(categoryChild);
                        }
                        categoryList.push(categoryMain);
                    }
                    this.categoryList = categoryList;
                }
            });
        }

        private toProductList(id: string = ""): void {
            this.navigateTo({
                name: "productList",
                query: {
                    categoryId: id
                }
            });
        }

        private changeHandler(): void {

        }

        private stickyChangeHandler(): void {

        }
    }
</script>

<style scoped lang="stylus">
    .view
        overflow hidden;
        height 100vh;
        width 100vw;
        position relative
        background #fff;

        .category-wrap
            padding-top calc(44px + var(--safe-area-inset-top));
            height 100vh ;
            position relative;

        >>> .cube-scroll-nav-main
            background: #fff

        >>> .cube-sticky-fixed
            background: #f3f5f7;

        >>> .cube-scroll-nav-bar
            background-color: transparent

        >>> .cube-scroll-nav-bar-item
            width 88px;
            padding: 0 12px
            height: 54px;
            line-height: 14px;
            font-size 12px;
            display flex !important;
            flex-direction column;
            justify-content center;
            align-item center;
            color #333
            position relative;

            &:after
                display block;
                position absolute;
                left 12px;
                bottom 0;
                right 12px
                border-top 1px solid rgba(7, 17, 27, .1);
                content " ";

        >>> .cube-scroll-nav-bar-item_active
            background #ffffff
            color #333333

            &:after
                display none;

        .cube-scroll-nav-panels
            background-color: #fff

    >>> .cube-scroll-nav-panel-title
        padding-left 14px;
        height 26px;
        line-height 26px;
        border-left 2px solid #d9dde1;
        font-size 12px;
        color #93999f;
        box-sizing border-box;
        background #f3f5f7;

    .cube-scroll-nav-panel
        img
            width: 70px
            height: 70px
            display block;
            margin auto auto 10px auto
            border-radius 5px;

        ul
            overflow: hidden
            font-size: 13px
            line-height: 1.4
            color #666
            padding 10px 0;

        li
            float: left
            width: 33.333%

            .category-child
                width: 75px
                margin: auto

                p
                    overflow: hidden
                    white-space: nowrap
                    text-overflow: ellipsis;
                    text-align center;


</style>
